<template>
    <div id="huiyuan">
        <!-- 查询表单 -->
        <el-form :inline="true" :model="customer" class="demo-form-inline">
            <el-form-item label="客户名称">
                 <el-input v-model="customer.name" placeholder="客户名称"></el-input>
            </el-form-item>
            <el-form-item label="会员编号">
                 <el-input v-model="customer.memberNo" placeholder="会员编号"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                 <el-input v-model="customer.phone" placeholder="客户手机"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="selectCustomers">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="insertCustomers">添加会员</el-button>
            </el-form-item>
        </el-form>
        
        
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column fixed prop="id" label="id"  width="100"> </el-table-column>
    <el-table-column prop="customerName" label="客户姓名" width="120"> </el-table-column>
    <el-table-column prop="userName" label="客户账户" width="120"> </el-table-column>
    <el-table-column prop="memberNo" label="会员编号" width="145"> </el-table-column>
    <el-table-column prop="phone" label="手机号" width="120"> </el-table-column>
    <el-table-column prop="balance" label="余额" width="120"> </el-table-column>
    <el-table-column prop="email" label="邮箱" width="170"> </el-table-column>
    <el-table-column prop="state" label="状态" width="100">
        <!-- 开关 -->
        <template slot-scope="scope">
           <el-switch v-model="scope.row.state" :active-value="0" :inactive-value="1" active-color="#13ce66" inactive-color="#DCDFE6" 
            @change="statusSwitch(scope.row)">
           </el-switch>
        </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="150"> </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <!-- 查看会员详细信息弹窗 -->
                <el-dialog
                    title="会员信息"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :center= false
                    :append-to-body=true
                    >
                    <span id="span">会员id:{{huiyaun.id}}</span>
                    <span id="span">客户姓名：{{huiyaun.customerName}}</span>
                    <span id="span">会员编号：{{huiyaun.memberNo}}</span>
                    <span id="span">客户手机：{{huiyaun.phone}}</span>
                    <span id="span">客户余额：{{huiyaun.balance}}</span>
                    <span id="span">客户邮箱：{{huiyaun.email}}</span>
                    <span id="span">创建日期：{{huiyaun.createTime}}</span>
                    
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">关 闭</el-button>
                    </span>
                </el-dialog>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="chongzhi(scope.row.id)">充值</el-button>
        </template>
        </el-table-column>
  </el-table>
   <!-- 分页 -->
   <el-pagination small layout="prev, pager, next" @current-change="clickcurrentChange" :total="total" :page-size="pageSize" :current-page="pageNum"></el-pagination>
    


    <!-- 添加会员的弹窗 -->
    <el-dialog title="添加会员" :visible.sync="cdialogFormVisible">
        <el-form ref="form" :model="insertCustomer" :rules="rules">
            <el-form-item label="客户名称"  prop="customerName">
                <el-input v-model="insertCustomer.customerName" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="客户账户"  prop="userName">
                <el-input v-model="insertCustomer.userName" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="客户手机"  prop="phone">
                <el-input v-model="insertCustomer.phone" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="充值金额"  prop="money">
                <el-input v-model="insertCustomer.money" oninput="value=value.replace(/[^0-9.]/g,'')" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="客户邮箱"  prop="email">
                <el-input v-model="insertCustomer.email" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cdialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="determineCustemer('form')">确 定</el-button>
        </div>
</el-dialog>
<!-- 充值金额弹窗 -->
    <el-dialog title="充值金额" :visible.sync="csdialogFormVisible">
        <el-form ref="form" :model="insertCustomer" :rules="rules">
            <el-form-item label="充值金额"  prop="money">
                <el-input v-model="insertCustomer.money" oninput="value=value.replace(/[^0-9.]/g,'')" autocomplete="off" style="width:200px"></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="csdialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="chongzhimem('form')">确 定</el-button>
        </div>
</el-dialog>
 </div>
</template>
<script>
export default {
    name : "huiyuan",
    data(){
        const validateMoney = (rules,value,callback) =>{
        if(!value){
            callback(new Error('金额不能为空'))
         }else if(value.indexOf(".") != -1 && value.split('.').length > 2){
            callback(new Error('请输入正确格式的金额')) //防止输入多个小数点
         }else if(value.indexOf(".") != -1 && value.split('.')[1].length > 2){
           callback(new Error('请输入正确的小数位数')) //小数点后两位
        }else{
          callback();
        }
    };
        return{
            //表格数据
            tableData : [],
            //页数
            pageNum: 1,
            //条数
            pageSize : 5,
            //总条数
            total : 0,
            //会员详细信息弹窗开关
            dialogVisible: false,
            // 充值金额弹窗
            csdialogFormVisible:false ,
            //查看会员详细信息字段
            huiyaun:[],

            //查询会员表单
            customer : {
                // 客户名称
                name : "",
                // 会员编号
                memberNo: "",
                // 客户手机号
                phone :"",

            },
            // 添加会员信息弹窗 （默认关闭）
            cdialogFormVisible : false,
            // 添加会员信息数据
            insertCustomer : {
                // 会员充值需要的客户id (充值的时候使用 )
                id : "",
                // 客户名称
                customerName :"",
                // 账户
                userName : "",
                // 手机号
                phone : "",
                // 充值金额
                money : "",
                // 邮箱
                email : "",
            },
            // 验证规则
            rules : {
                customerName : [
                         { required: true, message: "请填写客户名称！", trigger: "blur" },
                ],
                 userName : [
                      { required: true, message: "请填写用户名！", trigger: "blur" },
                      { min: 5, max: 20, message: "用户名在5-20之间", trigger: "blur" },
                ],
                 phone: [
                    { required: true, message: "请输入手机号", trigger: "blur", },
                    // 这个只能验证手机号
                    // { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入合法手机号", trigger: "blur" }
                    {
                        pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
                        message: "请输入合法手机号/电话号",
                        trigger: "blur",
                    },
                ],
                money : [
                         { required: true, trigger: "blur" ,validator:validateMoney},
                ],
                email: [
                    { required: true, message: "请输入邮箱", trigger: "blur" },
                    {
                        pattern:
                        /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g,
                        message: "请输入正确的邮箱",
                        trigger: "blur",
                    },
                ],
            },
        }
    },
    // 函数钩子
    async created() {
        this.getCustomer(this.pageNum,this.pageSize,this.customer.name,this.customer.memberNo,this.customer.phone);
    },
   
    // 所有请求
    methods:{
         // 查询按钮
        selectCustomers(){
            this.getCustomer(this.pageNum,this.pageSize,this.customer.name,this.customer.memberNo,this.customer.phone);
        },
        //表格数据
        getCustomer(pageNum,pageSize,name,memberNo,phone){
            this.$axios({
                url : "customer/selectCustomer",
                method : "post",
                data: {
                    pageNum : pageNum,
                    pageSize : pageSize,
                    customerName : name,
                    memberNo : memberNo,
                    phone : phone,
                }
                //回调函数
            }).then((res)=>{
                this.tableData = res.data.data.list;
                this.total = res.data.data.total;
            })
        },
        // 查看会员信息
        handleClick(row) {
            this.dialogVisible = true
            this.huiyaun = row
      },
      //当前页 事件
    clickcurrentChange(val) {
      this.pageNum = val;
      this.getCustomer(this.pageNum,this.pageSize);
    },
    //开关
    statusSwitch(row){
        const status = row.state;
        const id = row.id;
        this.$axios({
            url : "customer/updateStatus",
            method : "post",
            data : {
                state : status,
                id : id,
            }
        }).then(res=>{
            if(res.data.code == 200){
                this.$message({
                  message: "状态修改成功",
                  type: "success",
              });
            }else{
                this.$message.error("状态修改失败")
            }
        })
    },
    // 添加会员信息按钮
    insertCustomers(){
        this.insertCustomer.userName = "",
        this.insertCustomer.customerName = "",
        this.insertCustomer.money = "",
        this.insertCustomer.phone = "",
        this.insertCustomer.email = "",
        this.cdialogFormVisible = true

    },
    // 确定添加会员信息
    determineCustemer(name){
        if(this.insertCustomer.money<200){
            this.$message.error("首次充值会员不小于200元！")
            return
        }
        this.$refs[name].validate((valid)=>{
            if(valid){
                this.$axios({
                    url : "/customer/insertCustomer",
                    method : "post",
                    data :{
                        customerName : this.insertCustomer.customerName,
                        userName : this.insertCustomer.userName,
                        phone : this.insertCustomer.phone,
                        balance : this.insertCustomer.money,
                        email : this.insertCustomer.email,
                    },
                }).then(res=>{
                    if(res.data.code==200){
                        this.$message({
                            message: "会员添加成功",
                            type: "success",
                        });
                        this.cdialogFormVisible = false;
                        this.getCustomer(this.pageNum,this.pageSize,this.customer.name,this.customer.memberNo,this.customer.phone);
                    }else{
                        this.$message.error("添加失败");
                    }
                })
            }
        })
    },
    // 点击充值按钮
    chongzhi(row){
        console.log(row)
        this.insertCustomer.money = "",
        this.csdialogFormVisible = true;
        this.insertCustomer.id = row
        console.log(this.insertCustomer.id)
    },
    // 充值确定按钮
    chongzhimem(name){
        this.$refs[name].validate((valid)=>{
            if(valid){
                this.$axios({
                    url : "/customer/chongzhi",
                    method : "post",
                    data :{
                       id : this.insertCustomer.id,
                       balance : this.insertCustomer.money,
                    },
                }).then(res=>{
                    if(res.data.code==200){
                        this.$message({
                            message: "充值成功",
                            type: "success",
                        });
                        this.csdialogFormVisible = false;
                        this.getCustomer(this.pageNum,this.pageSize,this.customer.name,this.customer.memberNo,this.customer.phone);
                    }else{
                        this.$message.error("充值失败");
                        
                    }
                })
            }
        })
        
    }
    //methods结尾
    },
}
</script>
<style scoped>
#span{
    display: block;
    padding-top:10px ;
}
</style>